<template>
  <div class="login">
    <van-nav-bar left-arrow @click-left="onClickLeft" fixed />
    <div class="main">
      <div class="top">
        <p>绑定手机号有助于您快速找到好友</p>
      </div>
      <div class="row row1">
        <img src="../assets/images/phone.png" alt />
        <input type="number" placeholder="输入手机号码" v-model="phone" />
      </div>
      <div class="row row2">
        <img src="../assets/images/password.png" alt />
        <input type="number" placeholder="输入验证码" v-model="code" />
        <span @click="getPhoneCode">{{codeText}}</span>
      </div>
      <div class="login_bt">
        <p>
          登录即表明同意
          <span @click="touser">用户协议</span>和
          <span>隐私政策</span>
        </p>
        <p class="two">请仔细阅读</p>
      </div>
      <div class="row3" @click="login">
        <img src="../assets/images/confirm.png" alt />
      </div>
    </div>
     <div class="loading" v-show="is_loading">
      <van-loading  color="#1989fa" size="40"/>
    </div>
  </div>
</template>
<script>
export default {
  name: "login",
  data() {
    return {
      phone: "",
      code: "",
      codeText: "获取验证码",
      codeTime: 0,
      shareUid: "",
      activity_id: "",
       is_loading:false,
    };
  },
  mounted() {
    if (this.$route.query.uid) {
      this.shareUid = this.$route.query.uid;
    }
    if (this.$route.query.activity_id) {
      this.activity_id = this.$route.query.activity_id;
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    //验证码倒计时
    codeCountdown() {
      this.codeTime = 60;
      let time = setInterval(() => {
        if (this.codeTime <= 0) {
          this.codeText = "获取验证码";
          clearInterval(time);
        } else {
          this.codeTime--;
          this.codeText = this.codeTime + "s";
        }
      }, 1000);
    },

    //获取手机验证码
    async getPhoneCode() {
      if (this.codeTime > 0) {
        return false;
      }
      if (!this.phone) {
        this.$message({
          message: "手机号码不能为空",
          type: "error"
        });
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$toast("手机号码有误，请重填");
        return false;
      }
      this.codeCountdown();
      let params = {
        mobile: this.phone
      };
      const res = await this.$axios.post(this.$api.sendSms, params);
    },
    //登录
    async login() {
      this.is_loading=true;
      let params = {
        mobile: this.phone,
        captcha: this.code,
        user_id: localStorage.getItem('shareuid')
      };
      const res = await this.$axios.post(this.$api.codeLogin, params);
      if (res.code == 1) {
        this.$cookies.set("userInfo", JSON.stringify(res.data));
        this.$cookies.set("token", res.data.token);
        this.$cookies.set("uid", res.data.uid);
        // if (this.$route.query.returnUrl) {
        //   window.location.href =
        //     this.$route.query.returnUrl + "&uid=" + res.data.uid;
        // } else {
          this.is_loading=false;
        this.$router.push({
          path: "/download",
          query: {}
        });
        // }
      } else {
        this.$message({
          message: "登录失败：" + res.msg,
          type: "error"
        });
      }
    },
    touser() {
      window.location.href = "http://api.yushin2018.com/agreement.html";
    }
  }
};
</script>
<style scoped>
.login {
  height: 100vh;
  background-image: linear-gradient(0deg, #00c6d8 0%, #3ab7e6 39%, #74a7f3 100%),
    linear-gradient(#00c6d8, #00c6d8);
}
.login >>> .van-nav-bar {
  background: #6fa8f2;
}
.van-nav-bar .van-icon {
  color: #fff;
}
.van-hairline--bottom::after {
  border-bottom-width: 0;
}
.main {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main .row {
  width: 2.6rem;
  height: 0.45rem;
  background: #e9e9e9;
  border-radius: 50px;
  display: flex;
  align-items: center;
  padding-left: 0.22rem;
}
.main .row1 {
  margin-bottom: 0.3rem;
}
.main .row img {
  width: 0.12rem;
}
.main .row input {
  height: 0.4rem;
  padding-left: 0.14rem;
  border: none;
}
.main .row1 input {
  width: 2rem;
}
.main .row2 input {
  width: 1.2rem;
}
.main .row2 span {
  width: 0.96rem;
  height: 0.33rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00c6d8;
  font-size: 0.12rem;
  color: #fff;
  border-radius: 50px;
}
.row3 {
  margin-top: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.row3 img {
  width: 0.38rem;
}
.top {
  width: 100%;
  text-align: center;
  margin-bottom: 0.25rem;
}
.top p {
  font-size: 0.12rem;
  color: #fff;
}
.login_bt {
  margin-top: 0.51rem;
  font-size: 0.12rem;
  text-align: center;
}
.login_bt p {
  color: #fff;
}
.login_bt p span {
  color: #6159ff;
}
.two {
  margin-top: 0.05rem;
}
.loading{
  width:100%;
  height:100vh;
  position: fixed;
  top:0;
  left:0;
  display:flex;
  align-items: center;
  justify-content: center;
}
</style>


